import React, { useCallback, useEffect } from 'react'
import { View, Image } from '@tarojs/components'
import './index.scss'
import Taro from '@tarojs/taro'
import { setGlobal } from '../../redux/actions/counter'
import { useDispatch } from 'react-redux'

import Navbar from '../../components/navbar/navbar'

const EntranceItem = ({ title, index, path = '/pages/tickets/tickets' }) => {

  const gopath = useCallback(() => {
    Taro.navigateTo({
      url: path
    })
  }, [path])

  return <View className="entrance-item" onClick={gopath}>
    <View className="e-img">
      <Image src={`https://glack.net/img/blog/art_imgs/${index}.jpg`} />
    </View>
    <View className="e-title">{title}</View>
  </View>
}

const ENTRANCES = [
  { title: '火车票', path: '/pages/tickets/tickets' },
  { title: '汽车' },
  { title: '打车' },
  { title: '周边跟团' },
  { title: '境内游' },
  { title: '游轮' },
  { title: '出境游' },
  { title: '海外玩乐' },
]


const Index = () => {
  
  // getGlobal()

  return <View className="entrance-container">
    <Navbar isFixed={false} titleText="首页" />
    <View className="entrance-list">
      {ENTRANCES.map((entrance, i) => <EntranceItem {...entrance} index={i} />)}
    </View>
  </View>
}

export default Index